<template>
  <view>
    <view class="bg_f">
      <view class="example-body">
        <uni-steps :options="list1" active-color="#17AAFF" :active="active" />
      </view>
    </view>

    <view class="introduce rad_10">
      <view class="int_frame bg_f">
        <view class="int_text">
          <text class="f_wei">文字介绍 </text>
          <text class="col m_l_10">(必填)</text>
        </view>
        <view class="itn_input m_auto rad_10">
          <textarea class="text m_auto" rows="3" cols="10" :maxlength="maxleng" v-model="tInfo.text"></textarea>
          <view class="tip col">{{m_leng}}</view>
        </view>
      </view>

      <view class="recording bg_f rad_10">
        <view class="rec_text">
          <view>
            <text class="f_wei">语音介绍</text>
            <text class="col m_l_10">(选填)</text>
          </view>
          <view class="f_size col">小提示：可以介绍你的游戏操作等</view>
          <view class="f_size col">语音提示：录音完成后请点击 
            <text class="iconfont icon-right-1 col_dui"></text>
          </view>
        </view>
        <view>
          <jc-record
            voicePath=""
            :maxTime="15"
            :minTime="3"
            @okClick="saveRecord"
              @show="show"
              @close="close"
          >
          </jc-record> 
        </view>

      </view>

    </view>

    <view class="log-out-btn" @click="submit">下一步</view>

  </view>
</template>
<script>
import jcRrecord from '@/components/jc-record/jc-record.vue';
export default {
  components: {jcRrecord},
  data() {
    return{
      t_name: '', // 导航栏的标题
      m_leng: 100, // 剩余文字 提示
      maxleng: 100, // 最大文字
      tInfo: {
        text: '', // 文本输入框
        img: '', // 保存图片
        record: '', // 保存录音
      },
      active: 1,
				list1: [{
					title: '技能认证'
				}, {
					title: '填写资料'
				},{
					title: '平台审核'
				}],
        eeee: {}
    }
  },
  onLoad(opt) {
      this.t_name  = opt.name;
      this.tInfo.img = opt.img;
      uni.setNavigationBarTitle({
      　　title:opt.name
      })
		},
    methods:{
      // 录音
      saveRecord(recordPath) {        
        this.tInfo.record = recordPath;
        console.log("===音频文件地址："+recordPath+"===")
        //do... 可以使用 uni.uploadFile 接口上传到服务器
      },
      show(){

      },
      close(){
        
      },
      // 把数据提交后台
      submit(){
        // console.log('查看',JSON.stringify(this.eeee))
        // this.$http(this.$api.storeJoin,this.tInfo).then(res=>{
        //   console.log('陪玩入驻',res)
        // })
        this.$nav('/pagesUser/integral/examine?name='+ this.t_name)
      },
    },
    watch:{
      text(){
        this.m_leng = this.maxleng - this.tInfo.text.length;
      }
    },
}
</script>
<style lang="scss">
page{height: 100%;background-color: #F8F8F8;font-size: 26rpx;}
.introduce{
  width: 710rpx;
  // height: 310rpx;
  margin: 140rpx auto;
  // margin-top: 100rpx;
  .int_frame{
    height: 320rpx;
  }
  .int_text{
    padding: 25rpx 20rpx;
  }
  .itn_input{
    width: 670rpx;
    height: 200rpx;
    background-color: #F6F7F9;
    margin-bottom: 30rpx;
    position: relative;
    .text{
      height: 100%;
      // background-color: rgb(28, 99, 121);
      padding: 20rpx 0;
      box-sizing: border-box;
    }
    .tip{
      position: absolute;
      bottom: 15rpx;
      right: 15rpx;
    }
  }
}

.recording{
  margin-top: 20rpx;
  .rec_text{
    margin-left: 20rpx;
    padding-top: 20rpx;
    >view{
      padding: 5rpx 0;
    }
  }
}

.m_auto{
  margin: 0 auto;
}
.m_l_10{
  margin-left: 10rpx;
}
.f_wei{
  font-weight: 900;
}
.rad_10{
  border-radius: 10rpx;
}
.bg_f{
  background-color: #FFF;
}
.f_size{
  font-size: 22rpx
}
.col{
  color: #919191;
}
.col_dui{
  color: #1DA5F9;
}
.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  flex-direction: row;
  padding: 30rpx;
  .uni-steps__row-title{
    padding: 20rpx 0;
  }
}

.log-out-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690rpx;
  height: 80rpx;
  margin: 0 auto;
  color: #fff;
  background-color: #1D88FC;
  border-radius: 50rpx;
  box-shadow: 1px 2px 5px rgba(18, 119, 231, 0.4);	
}
</style>